<!--
  To change this template, choose Tools | Templates
  and open the template in the editor.
-->

<%@ page contentType="text/html;charset=UTF-8" %>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>List Vehicles</title>
    <meta name="layout" content="main">    
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  </head>
  <body>
    <br>
  <g:link class="list" action="listVehicles">
    <div class="tabSelected">
      List Vehicles
    </div>
  </g:link> 
  <g:link class="list" action="edit" id="${session.data.id}">
    <div class="tabNoSelected">
      Edit My data
    </div>
  </g:link>  

  <g:link class="list" action="logout" controller="LogIn">
    <div class="tabNoSelected">Log Out</div>
  </g:link>
  <hr>
  <table>
    <thead>
      <tr>

    <g:sortableColumn property="licensePlate" title="${message(code: 'vehicle.licensePlate.label', default: 'License Plate')}" />

    <g:sortableColumn property="serialNumber" title="${message(code: 'vehicle.serialNumber.label', default: 'Serial Number')}" />

    <g:sortableColumn property="policyNumber" title="${message(code: 'vehicle.policyNumber.label', default: 'Policy Number')}" />

    <g:sortableColumn property="mileage" title="${message(code: 'vehicle.mileage.label', default: 'Mileage')}" />

    <g:sortableColumn property="fuelType" title="${message(code: 'vehicle.fuelType.label', default: 'Fuel Type')}" />

    <g:sortableColumn property="carMake" title="${message(code: 'vehicle.carMake.label', default: 'Car Make')}" />

  </tr>
</thead>
<tbody>
<g:form action="searchVehicle" >
  <fieldset class="buttons">
    <g:textField name="licensePlate" maxlength="7" placeholder="License Plate" pattern="[A-Z-a-z][A-Z-a-z][A-Z-a-z][ ][0-9][0-9][0-9]{1}" required="" value="${licensePlate}"/>
    <g:submitButton name="search" class="edit" value="${message(code: 'Search')}" />
  </fieldset>
</g:form>

<g:each in="${vehicleInstanceList}" status="i" var="vehicleInstance">
  <tr class="${(i % 2) == 0 ? 'even' : 'odd'}">

    <td><g:link action="showVehicle" id="${vehicleInstance.id}">${fieldValue(bean: vehicleInstance, field: "licensePlate")}</g:link></td>

  <td>${fieldValue(bean: vehicleInstance, field: "serialNumber")}</td>

  <td>${fieldValue(bean: vehicleInstance, field: "policyNumber")}</td>

  <td>${fieldValue(bean: vehicleInstance, field: "mileage")}</td>

  <td>${fieldValue(bean: vehicleInstance, field: "fuelType")}</td>

  <td>${fieldValue(bean: vehicleInstance, field: "carMake")}</td>

  <td>
  <g:link controller="Customer" id="${vehicleInstance.id}" action="listDiagnostic">
    <img class="diagnostico" title="Diagnostics" src="${resource(dir: 'images', file: 'boton-diagnostico.png')}" />
  </g:link>
  <g:link controller="Customer" action="listInventory" id="${vehicleInstance.id}" >
    <img class="inventario" title="Inventories" src="${resource(dir: 'images', file: 'boton-inventario.png')}" />
  </g:link>
  <g:link controller="Customer" id="${vehicleInstance.id}" action="listService">
    <img class="servicio" title="Services" src="${resource(dir: 'images', file: 'boton-servicios.png')}"/>
  </g:link>
  </td>
  </tr>
</g:each>
</tbody>
</table>
<script>
    //diagnostico, inventario, servicio
    jQuery(
      function(){
        jQuery(".diagnostico, .inventario, .servicio").tooltip()
      }
    )
</script>
</body>
</html>
